<template>
	<div class="app-container">
		<el-row style="display:flex;">
			<el-col :span="6">
				<el-table ref="roleTable" :data="roleList" @current-change="roleChange" highlight-current-row border style="width:255px">
					<el-table-column prop="g_id" label="" v-if="false" />
					<el-table-column prop="g_name" label="角色名称" align="center" />
				</el-table>
			</el-col>
			<el-col :span="18">
				<!-- <el-button size="small" type="success" @click="OpenDialog">添加用户</el-button>
        <el-button size="small" type="danger" @click="Delete">删除用户</el-button> -->
				<el-form inline>
					<el-form-item v-for="butten in buttens" :key="butten">
						<el-button size="small" :type="butten=='Add'?'success':butten=='Update'?'warning':butten=='Delete'?'danger':butten=='Export'?'primary':butten" class="promiseButton" :icon="butten=='Add'?'el-icon-edit':butten=='Update'?'el-icon-edit':butten=='Delete'?'el-icon-delete':butten=='Export'?'el-icon-download':butten" :loading="butten=='Export'?downloadLoading:false" @click="butten=='Add'?OpenDialog(false):butten=='Update'?OpenDialog(true,rows):butten=='Delete'?Delete(rows):butten=='Export'?Export():null">
							{{butten=='Add'?'添加用户':butten=='Update'?'更新':butten=='Delete'?'删除用户':butten=='Export'?'导出':butten}}
						</el-button>
					</el-form-item>
				</el-form>
				<div class="table">
					<!--引入表格组件        -->
					<table-vue v-loading="loadingTable" :columns="columns" :data="dataList" :rows="rows" :table-set="tableSet" @current-change="Choose" @selection-change="SelectionChange" @changeSortCallBack="changeSortCallBack" empty-text="暂无数据">
					</table-vue>
					<pagination v-show="total>0" :total="total" :page.sync="searchParams.pageIndex" :limit.sync="searchParams.pageSize" @pagination="handleQuery" />
				</div>
				<div>
					<el-dialog :title="dialogSet.isEdit?'编辑'+dialogSet.title:'新增'+dialogSet.title" :visible.sync="dialogSet.dialogVisible" :edit.sync="dialogSet.isEdit" width="700px" center>
						<new-dialog ref="newDialog" v-if="dialogSet.dialogVisible" :visible.sync="dialogSet.dialogVisible" @update="update" @add="add" :edit.sync="dialogSet.isEdit" :dialog-form-data="dialogFormData" :dialog-form="dialogForm" />
					</el-dialog>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import TableVue from "@/components/common/TableView";
import Pagination from "@/components/common/Pagination";
import newDialog from "@/components/common/newDialog";
export default {
	components: {
		TableVue,
		Pagination,
		newDialog,
	},
	data() {
		return {
			roleList: [],
			//表格相关配置
			tableSet: {
				selection: true, //是否显示多选框
				showKey: true, //显示索引列
				idColum: "u_id", //（id）主键列名称
			},
			//表格表头数据
			//Object.freeze 百度去理解 提升性能并且禁止对于该对象的属性进行修改（
			columns: Object.freeze([
				{
					sortable: true,
					attrs: {
						prop: "u_nick",
						label: "姓名",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					//排序 若做了分页sortable:"custom"
					sortable: true,
					attrs: {
						prop: "u_name",
						label: "账号",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "u_phone",
						label: "手机",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					hidden: false,
					attrs: {
						prop: "u_state",
						label: "状态",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
			]),
			dialogSet: {
				title: "用户角色",
				isEdit: false,
				dialogVisible: false,
			},
			//新增编辑相关信息
			dialogFormData: {
				g_id: "",
				u_id: "",
			},
			//新增编辑form
			dialogForm: {
				labelWidth: "100px",
				inline: false,
				labelPosition: "right",
				size: "small",
				formItem: [
					{
						type: "select",
						label: "选择用户",
						width: "200px",
						prop: "u_id",
						size: "small",
						isDisabled: false,
						multiple: false,
						placeholder: "请选择",
						tip: "",
						value: "",
						options: [],
						required: true,
					},
				],
			},
			//加载表格
			loadingTable: true,
			//下载表格
			downloadLoading: false,
			dataList: [],
			searchParams: {
				pageIndex: 1,
				pageSize: 20,
				orderColumn: "", //排序字段
				orderSort: "", //排序顺序
			},
			buttens: undefined,
			//选中的行
			rows: [],
			total: 0, //查询返回的总条
			//用户下拉框数据
			userOptions: [],
		};
	},
	watch: {},
	mounted: function () {
		//获取按钮权限(展示哪些按钮)
		this.buttens = this.$store.getters.buttens;
		console.log(this.buttens);
		this.getRoleList();
		// this.getUserList();
	},
	methods: {
		load() { },
		getRoleList() {
			this.baseRequest.Post("Group/List", {}).then((res) => {
				this.roleList = res.bodyList;
				if (this.roleList.length > 0) {
					this.$refs.roleTable.setCurrentRow(this.roleList[0]); //选中第一行
				}
			});
		},
		getUserList(row) {
			var data = {};
			var params = {};
			if (row != undefined) {
				params.groupId = row.g_id;
			}
			this.baseRequest.Post("UserGroup/List", data, params).then((res) => {
          this.loadingTable=false;
				this.dataList = res.bodyList;
				this.total = this.dataList.length;
				this.dataList.forEach((item) => {
					if (item.u_state === 1) {
						item.u_state = "启用";
					}
					if (item.u_state === 0) {
						item.u_state = "禁用";
					}
					if (item.u_state === -1) {
						item.u_state = "删除";
					}
				});
			});
		},
		//下拉框数据源
		getUserListSelect() {
			this.baseRequest.Post("User/List", {}).then((res) => {
				this.userOptions = [];
				res.bodyList.forEach((item) => {
					this.userOptions.push({
						value: item.u_id,
						label: item.u_nick,
					});
				});
				//用来解决非响应式的办法,数组动态添加是非响应式的 直接指向对象可变为响应式
				this.dialogForm.formItem[0].options = this.userOptions;
			});
		},
		roleChange(row) {
         this.loadingTable=true;
			this.getUserList(row);
			this.dialogFormData.g_id = row.g_id;
		},
		OpenDialog() {
			// //清空this.dialogFormData的值
			// Object.keys(this.dialogFormData).forEach((key) => {
			//   this.searchData[key] = '';
			// });
			this.getUserListSelect();
			this.dialogSet.dialogVisible = true;
		},
		add() {
			this.baseRequest
				.Post("UserGroup/Add", this.dialogFormData)
				.then((res) => {
					this.$message({
						message: "新增成功",
						type: "success",
					});
					this.dialogSet.dialogVisible = false;
					this.getUserList({ g_id: this.dialogFormData.g_id });
				});
		},
		update() { },
		Delete() {
			if (this.rows == undefined || this.rows.length <= 0) {
				this.$msgbox.alert("请选则需要删除的行");
				return;
			}
			var idList = [];
			this.rows.forEach((item) => {
				idList.push(item[this.tableSet.idColum]);
			});
			this.baseRequest
				.Post(
					"UserGroup/Delete",
					{},
					{ groupId: this.dialogFormData.g_id, idList: idList }
				)
				.then((res) => {
					this.$message({
						message: "删除成功",
						type: "success",
					});
					this.dialogSet.dialogVisible = false;
					this.getUserList({ g_id: this.dialogFormData.g_id });
				});
		},
		handleQuery() { },
		//排序回调事件
		changeSortCallBack(props, order) { },
		//切换选中行触发
		Choose(row) { },
		//勾选行事件
		SelectionChange(rows) {
			this.rows = rows;
		},
	},
};
</script>
<style lang="scss">
.el-form-item {
	margin-bottom: 0px;
}
.app-container {
	padding: 20px;
}
</style>
